import React, { PureComponent } from 'react';
import { Form, Input, TimePicker } from 'antd';
import moment from 'moment';
import styles from './index.less';

export default class Index extends PureComponent {
  constructor(props) {
    super(props);
    const { data = {} } = props;
    const { shift_name, start_date, end_date } = data;
    this.state = {
      cnt: shift_name ? shift_name.length : 0,
      start_date: start_date ? moment(start_date, 'HH:mm') : undefined,
      end_date: end_date ? moment(end_date, 'HH:mm') : undefined,
      startTimeString: start_date,
      endTimeString: end_date
    }
  }

  onChange = (e) => {
    const value = e.target.value;

    this.setState({ cnt: value ? value.length : 0 });
  }

  onStartChange = (time, timeString) => {
    this.setState({ startTimeString: timeString });
  }

  onEndChange = (time, timeString) => {
    this.setState({ endTimeString: timeString });
  }

  render() {
    const { cnt = 0, start_date, end_date, startTimeString, endTimeString } = this.state;
    const { form, data = {} } = this.props;
    const { getFieldDecorator } = form;
    const { title_type = {} } = data;

    return (
      <Form layout='vertical'>
        <Form.Item label='班次名称'>
          {getFieldDecorator('shift_name', {
            initialValue: data.shift_name || undefined,
            rules: [{ required: true, message: '该项为必填项' }],
          })(
            <Input
              maxLength={20}
              placeholder='请输入班次名称'
              size='large'
              suffix={<div style={{ color: '#909399', fontSize: 12 }}>{cnt}/20</div>}
              onChange={this.onChange}
            />
          )}
        </Form.Item>
        <div>
          <Form.Item label='时间' style={{ display: 'inline-block', verticalAlign: 'top' }}>
            {getFieldDecorator('start_date', {
              initialValue: start_date,
              rules: [{ required: true, message: '该项为必填项' }],
            })(
              <TimePicker
                format='HH:mm'
                placeholder='任意时间点'
                size='large' style={{ width: 185 }}
                onChange={this.onStartChange}
              />
            )}
            <span style={{ display: 'inline-block', width: 60, textAlign: 'center' }}>{!startTimeString || !endTimeString || startTimeString < endTimeString ? '至' : '至次日'}</span>
          </Form.Item>
          <Form.Item label={<div style={{ height: 21 }} />} style={{ display: 'inline-block', verticalAlign: 'top' }} className={styles.no_required}>
            {getFieldDecorator('end_date', {
              initialValue: end_date,
              rules: [{ required: true, message: '该项为必填项' }]
            })(
              <TimePicker
                format='HH:mm'
                placeholder='任意时间点'
                size='large' style={{ width: 185 }}
                onChange={this.onEndChange}
              />
            )}
          </Form.Item>
        </div>
      </Form>
    );
  }
}